import type { App } from 'vue'
import VMdEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import '@kangc/v-md-editor/lib/theme/style/github.css'

import VMdPreview from '@kangc/v-md-editor/lib/preview'
import '@kangc/v-md-editor/lib/style/preview.css'

import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/npm'
import '@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css'

// highlightjs
import hljs from 'highlight.js'

VMdEditor.use(githubTheme, {
  Hljs: hljs
}).use(createMermaidPlugin())

VMdPreview.use(githubTheme, {
  Hljs: hljs
}).use(createMermaidPlugin())

function useEditor(app: App) {
  app.use(VMdEditor)
  app.use(VMdPreview)
}

export const setupVMdEditor = (app: App<Element>): void => {
  app.use(useEditor)
}
